import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtForm, AtButton } from 'taro-ui'

import './index.scss'

export default class Reset extends Component {
  constructor (props) {
    super(props)
    this.state = {
      phone: '',
      pwd: ''
    }
  }

  config = {
    navigationBarTitleText: '重设密码'
  }

  componentWillMount () { }

  componentDidMount () { }

  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  handlePhone (value) {
    this.setState({
      phone: value
    })
  }

  handleChange (value) {
    this.setState({
      pwd: value
    })
  }

  render () {
    return (
      <View className='reset'>
        <AtForm>
          <AtInput
            clear
            name='phone'
            title='+86'
            type='Reset'
            placeholder='请输入手机号'
            value={this.state.phone}
            onChange={this.handlePhone.bind(this)}
          />
          <AtInput
            clear
            name='pwd'
            focus
            type='password'
            placeholder='设置登录密码，不少于6位'
            value={this.state.pwd}
            onChange={this.handleChange.bind(this)}
          />
          <AtButton type='primary' circle disabled={this.state.phone.length === 0 || this.state.pwd.length === 0}>下一步</AtButton>
        </AtForm>
      </View>
    )
  }
}
